<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<!-- JavaScript：核心语法+dom(针对页面操作)+BOM（针对浏览器）
			学习主体：针对页面操作比较多---DOM操作
			JQuery操作DOM：理解：JQ框架改变页面内容效果
			js基础就可以直接学习，了解函数使用
			基础函数------事件源之后出现，事件源语法糖中
			html（）     作用：增加一个元素，覆盖原有html
			val()        作用：针对input元素，实现修改文本内容
			text()       作用：生成文本内容
		 -->
		 <script src="js/jquery-1.11.1.js"></script>
		 <style>
		 </style>
	</head>
	<body>
		<!-- 鼠标点击按钮，然后，改变下面产生一行文本 -->
		<button>按钮</button>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, doloribus architecto libero temporibus aut, nihil omnis quod voluptate, neque placeat distinctio commodi laudantium at laborum repellat veritatis autem nobis ullam?</p>
		<div style="width: 200px; height: 200px; background: #000;"></div>
		<h3>lorem</h3>
		
		
		<input type="button" value="按钮2"/>
		<input type="text" value="输入框可以直接写文本"/>
	<script>
		$("button").click(function(){
			/*JQ操作DOM--html()函数使用*/
			$("p").html("<h1>JQ操作DOM-html函数使用</h1>")
		})
		$("div").mouseenter(function(){
			/*JQ操作DOM--html()函数使用*/
			$("h3").html("<h3>黄颜色</h3>")
		})
		/*练习：div 200*200 背景颜色：黑色，鼠标滑过之后
		下面内容修改：<h3>提示，修改为黄色*/
		/*练习：按钮  文本框             点击按钮，文本增加一行文本*/
		$("input[type='button']").click(function(){
			//alert("jq选择器是否选中")
			$("input[type='text']").val("文本框内容修改")
		})
		/*利用JQ操作DOM（页面效果）：元素内容操作（3个函数）
								   属性操作（4个函数）
								   样式类名操作（4个函数）
								   元素样式操作（5个函数）
								   插入和删除操作（7个函数）
								   元素遍历操作（6个函数）
								   JQ动画操作（7个函数）*/
		$("input[type='button']").click(function(){
			//alert("jq选择器是否选中")
			$("input[type='text']").val("文本框内容修改")
		})
		/**/
		
	</script>
	</body>
</html>